<template>
    <div class="">
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator="/">
        <el-breadcrumb-item>模板管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
          <!-- 新增按钮 -->
        <el-row :gutter="10" class="mb8" style="marginBottom:20px">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addTaskHandle">新增</el-button>
        </el-col>
      </el-row>
        <!-- 内容区域 -->
        <el-table :data="userList" tooltip-effect="dark" style="width: 100%">
        <el-table-column prop="templateCode" label="模板代码" width="140" align="center"> </el-table-column>
        <el-table-column prop="templateName" label="模板名称" width="140" align="center"> </el-table-column>
        <el-table-column prop="outerTemplateType" label="模板类型">
            <!-- 模板类型 0：验证码短信，1：通知短信，2：推广短信，3：国际/港澳台短信，7数字短信 -->
            <template slot-scope="scope">
            <span :value="scope.row.outerTemplateType">{{
                scope.row.outerTemplateType === 0 ? '验证码短信' 
                : scope.row.outerTemplateType ===1 ? '通知短信' 
                : scope.row.outerTemplateType === 2 ? '推广短信' 
                : scope.row.outerTemplateType === 3 ? '国际/港澳台短信' : '数字短信'
            }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="auditStatus" label="审批状态">
          <!-- AUDIT_STATE_INIT：审核中，AUDIT_STATE_PASS：审核通过，AUDIT_STATE_NOT_PASS：审核未通过，AUDIT_STATE_CANCEL或AUDIT_SATE_CANCEL：取消审核-->
          <template slot-scope="scope">
            <span :value="scope.row.auditStatus">{{
                scope.row.auditStatus === 'AUDIT_STATE_INIT' ? '审核中' 
                : scope.row.auditStatus === 'AUDIT_STATE_PASS' ? '审核通过' 
                : scope.row.auditStatus === 'AUDIT_STATE_NOT_PASS' ? '审核未通过' 
                : scope.row.auditStatus === 'AUDIT_STATE_CANCEL' || scope.row.auditStatus === 'AUDIT_SATE_CANCEL' ? '取消审核' : ''
            }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="templateContent" label="模板内容"> 
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              title="模板内容"
              width="200"
              trigger="hover"
              :content="scope.row.templateContent"
            >
              <el-button slot="reference" type="text" size="mini">查看模板</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间" align="center" width="158px"> </el-table-column>
        <el-table-column prop="reason" label="审核信息" align="center">
          <template slot-scope="scope">
            <!--reason是个空对象则展示无  -->
            <span v-if="scope.row.auditStatus !== 'AUDIT_STATE_NOT_PASS'">暂无审核信息</span>
            <div v-else> 
                <el-popover
                placement="top-start"
                title="审核信息"
                width="220"
                trigger="hover"
              >
                <div v-html="getPopoverContent(scope.row.reason)"></div>
                <el-button slot="reference" type="text" size="mini">查看审核</el-button>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="orderId" label="工单ID" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width">
          <template  slot-scope="scope">
            <el-button v-if="scope.row.auditStatus==='AUDIT_STATE_NOT_PASS'"
             size="mini" type="text" icon="el-icon-edit" @click="handleUpdata(scope.row)">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="hanldeRemove(scope.row.templateCode)">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
        <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
      </el-card>
      <!-- 弹出框 新增 -->
    <el-dialog :title="upload.title" width="600px"  :visible.sync="dialogVisible" @close="addDialogClosed" append-to-body> 
      <!-- 内容主题区域 -->
      <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="80px">
        <el-row>
          <el-col :span="18">
            <el-form-item label="短信类型" prop="templateType">
              <el-select v-model="addForm.templateType" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in templateTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="模板名称" prop="templateName">
              <el-input
              placeholder="请输入内容"
              v-model="addForm.templateName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="模板内容" 
            prop="templateContent">
              <el-input  
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="addForm.templateContent"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="申请说明" prop="remark">
              <el-input type="textarea"
              :rows="2"
              placeholder="请输入申请说明"
              v-model="addForm.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleOk">确 定</el-button>
      </span>
    </el-dialog>
    </div>
</template>

<script>
export default {
    name: "templateManagement",
    data() {
        return {
            userList: [],
            total:0,
            queryInfo: {
                // 当前的页数
                currentPage: 1,
                // 当前每页显示多少条数据
                pageSize: 10,
            },
            // 对话框显示与隐藏
          dialogVisible: false,
          addForm: {},
          templateCode:'',
          addFormRules: {
            templateType: [
              { required: true, message: "短信类型不能为空", trigger: "blur" },
            ],
            templateName: [
              { required: true, message: "模板名称不能为空", trigger: "blur" },
            ],
            templateContent: [
              { required: true, message: "模板内容不能为空", trigger: "blur" },
            ],
            remark: [
              { required: true, message: "申请说明不能为空", trigger: "blur" },
            ],
          },
          // 用户导入参数
          upload: {
            // 弹出层标题（用户导入）
            title: '',
            // 是否禁用上传
            isUploading: false,
            // 是否更新已经存在的用户数据
            updateSupport: 0
          },
          templateTypeOptions: [
            {
              value: 0,
              label: '验证码短信'
            },
            {
              value: 1,
              label: '通知短信'
            },
            {
              value: 2,
              label: '推广短信'
            },
            {
              value: 3,
              label: '国际/港澳台短信'
            },
            {
              value: 7,
              label: '数字短信'
            }
          ],  
        }
    },
    methods: {
      // 监听 pageSize 改变的事件
      handleSizeChange(newSize) {
        this.queryInfo.pageSize = newSize
        this.getList()
      },
      // 监听页码值改变的事件
      handleCurrentChange(newPage) {
        this.queryInfo.currentPage = newPage
        this.getList()
      },
      // 定时路由列表
      async getList() {
        const params = {
          ...this.queryInfo,
          isPage:true
        }
        const { data: res } = await this.$http.post('/note/modelPage', params)
        if (res.code === 20000) {
          this.userList = res.data.body.smsTemplateList
          this.total = parseInt(res.data.body.totalCount)
        } else {
          this.$message.error(res.msg)
        }
      },
      getPopoverContent(reason) {
        return `
          <div>
            <p>审核时间：${reason.rejectDate}</p>
            <p>原因：${reason.rejectInfo}</p>
            <p>审核备注：${reason.rejectSubInfo}</p>
          </div>
        `;
      },
      addTaskHandle() {
        this.dialogVisible = true
        this.upload.title = '增加申请'
      },
      handleUpdata(row){
        this.dialogVisible = true
        this.upload.title = '修改申请'
        this.templateCode = row.templateCode
        this.addForm={
          templateType: row.outerTemplateType,
          templateName: row.templateName,
          templateContent: row.templateContent,
          remark: row.remark
        }

      },
      // 监听添加用户对话框确定按钮的点击事件
      handleOk(){
        const params = this.addForm
        this.$refs['addFormRef'].validate(async valid => {
          if(valid){
            if(this.templateCode){
              params.templateCode = this.templateCode
              const { data: res } = await this.$http.post(
                '/note/modelUpdate',
                params
              );
              if (res.code === 20000) {
                this.$message.success('修改成功');
                this.dialogVisible = false
                this.getList();
                this.templateCode = ''
                this.addForm = {}
              } else {
                this.$message.error(res.msg);
              }
            }else{
                const { data: res } = await this.$http.post(
                '/note/modelAdd',
                params
              );
              if (res.code === 20000) {
                this.$message.success('添加成功');
                this.dialogVisible = false
                this.getList();
                this.templateCode = ''
                this.addForm = {}
              } else {
                this.$message.error(res.msg);
              }
            }
          }else{
            return false
          }
        })
      },
      // 监听添加用户对话框关闭事件
      addDialogClosed() {
        // 重置表单
        this.$refs['addFormRef'].resetFields()
        this.templateCode = ''
        this.addForm = {}
      },
      hanldeRemove(code){
        this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          console.log(code);
          const { data: res } = await this.$http.get(
            `/note/modelDelete?templateCode=${code}`
          );
          if (res.code === 20000) {
            this.$message.success('删除成功');
            this.getList();
          } else {
            this.$message.error(res.msg);
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
    },
    created() {
        this.getList()
    }
}
</script>

<style scoped lang="less">

</style>